﻿<%--
Created by IntelliJ IDEA.
登录
User: Admin
Date: 2022/5/30
Time: 15:30
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--加入该标签手动开启el功能--%>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>登录注册</title>
    <style type="text/css">
        .table tr {
            border-collapse: collapse;
        }
    </style>
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                if ($(".email").val()) {
                    //用POST的提交方式，将验证码发到IphoneServlet里面去，
                    $.ajax({
                        type: "POST",
                        url: "./iphoneMode?mobileCode",
                        data: {
                            iphone: $(".email").val(),
                        },
                        success: function (data) {
                            alert("尊敬的用户，验证码已发送到您的手机上了，请注意查收");
                        },
                    })
                } else {
                    alert($("#notice").html("请填写手机号"));
                    setTimeout(function () {
                        $("#notice").hide();
                    }, 1000);
                }
            });
            //  判断用户是否可以注册
            $("#submit").click(function () {
                if ($(".email").val()) {
                    $("#RegistForm")    .submit();
                } else {   //  如果没有值
                    alert($("#notice").html("请完整信息"));
                    setTimeout(function () {
                        $("#notice").hide();
                    }, 1000);
                }
            });
        });

        function setTime(targetElement) {
            //倒计时初始化秒数
            var countdown = 60;
            var id = setInterval(setCountdown, 1000, targetElement);

            //设置倒计时
            function setCountdown(targetElement) {
                if (countdown == 0) {
                    targetElement.removeAttribute("disabled");
                    targetElement.value = "发送手机验证码";
                    countdown = 60;
                    clearInterval(id);//停止调用函数
                } else {
                    targetElement.setAttribute("disabled", true);
                    targetElement.value = "重新发送(" + countdown + ")";
                    countdown--;
                }
            }
        }
    </script>
    <style>
        .container {
            width: 420px;
            height: 100px;
            min-height: 250px;
            max-height: 250px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;
        }
    </style>
    <%--引用在线layui--%>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/layui.js">
</head>
<body background="assets/img/adminBj.png">
<form class="layui-form layui-form-pane" action="./UserServlet?" id="RegistForm" method="post">
    <div class="container">
        <div class="layui-form-mid layui-word-aux">
            <span>登入</span>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label"><i class="layui-icon" style="font-size: 20px;">&#xe66f;</i>手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" class="email">
                <input type="button" class="layui-btn layui-btn-sm" id="btn" value="发送手机验证码"
                       onclick="setTime(this)"/><br/>
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label"><i class="layui-icon" style="font-size: 20px;">&#xe679;</i>验证码</label>
            <div class="layui-input-block">
                <input type="text" name="code" class="code">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label"><i class="layui-icon" style="font-size: 20px;">&#xe673;</i>
                密&nbsp;码</label>
            <div class="layui-input-block">
                <input type="password" name="password">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" id="submit" class="layui-btn" lay-submit lay-filter="formDemo"></a>立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <a href="enroll.jsp"> 切换</a>
            </div>
        </div>
    </div>
</form>
</body>
</html>